import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { PlusOutlined, FormOutlined, BarsOutlined } from '@ant-design/icons-vue'
import { getInsCompanyChannel } from '@/api/insCompany/index'
import renderModal, {
    getModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
// 详情页暂时不需要使用
import Detail from './detail/Index'
import type { AnyObject } from 'ant-design-vue/es/_util/type'

@Component
export class ChannelInsView extends Render {

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() { 
        return {
            title: '添加渠道',
            width: '450px',
            theme: 'dark',
            show: false,
            params: { 
                confirmText:'确定'
            },
            items: {
                insuranceId: {
                    name: '渠道LOGO：',
                    element: 'upload',
                    params: {
                        autoUpload: false,
                        suffix: '限500K，支持jpg、png、jpeg',
                        accept: '.png,.jpg,.jpeg',
                    }
                },
                numList: {
                    value: null,
                    name: '保单号',
                    element: 'input',
                    required: true,
                    placeholder: '请输入渠道名称',
                },
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            }
        } as FormModalDto
    }
	
    onOpenAddPop() {
        this.formConfig.show = true
        console.log(this.formConfig, '点击了')
    }
	
    // onLoadData(page: number, size: number, filters: AnyObject) {
    //     return 
    // }
	
    async onMounted() { 
        const result = await getInsCompanyChannel()
        console.log(result, 'resultresult')
    }

    render() {
        return (
            <div class="grid gap-16 grid-cols-4 overflow-hidden p-16">
                <div onClick={ this.onOpenAddPop } class=" border-1 border-gray-light-700 rounded-base flex flex-col items-center justify-center h-46.5 cursor-pointer">
                    <PlusOutlined style="fontSize=24; color='#9497B1'" />
                    <div class="mt-20 text-gray-light-600 text-base">点击添加渠道信息</div>
                </div>
                <div class=" px-24 py-20  h-46.5 rounded-base border-gray-light-700  border-1">
                    <div class="flex justify-between">
                        <div class="flex items-center">
                            <div class="bg-[#52ACFF] w-40 h-40 mr-8 rounded-base "></div>
                            <div class="">
                                <div class="text-black-light-200 font-semibold">企业星</div>
                                <div class="text-black-300 text-base">QDSAJ201541</div>
                            </div>
                        </div>
                        <FormOutlined style="fontSize=18; color='#202536'"/>
                    </div>
                    <div class="flex items-center mt-20">
                        <div class="text-[#9EAFFA] text-base">已连接：4</div>
                        <div class="ml-8 mb-0.5">
                            <BarsOutlined style="fontSize=18" />
                        </div>
                    </div>
                    <div class="mt-16 text-black-light-200 text-sm">
                        <div>推送（POST）</div>
                        <div>通过子弹CRM，将数据直接推送到（蓝工盾系统）平台设置的接收APl。</div>
                    </div>
                </div>
				
                {/* <Detail /> */}
                {/* renderModal 方法暂时无法使用 */}
                { renderModal(this.formConfig) }
            </div>
        )
    }
}

export default toNative<{}, {}>(ChannelInsView)